<script setup>
import {onMounted, ref} from 'vue'
import {
  NButton,
  NForm,
  NFormItem,
  NInput,
  NTabPane,
  NTabs,
  NImage,
  NUpload,
  useMessage,
  NLayout,
  NLayoutContent
} from 'naive-ui'
import { useI18n } from 'vue-i18n'
import CommonPage from '@/components/page/CommonPage.vue'
import { useUserStore } from '@/store'
import api from '@/api'
import {getToken, is, renderIcon} from '~/src/utils'
const { t } = useI18n()
const userStore = useUserStore()
const isLoading = ref(false)
const base_path = import.meta.env.VITE_BASE
const message = useMessage()

const data = reactive({
  uploadAction: base_path+'/system/base/userimg',
  token: getToken(),
});
const infoForm = ref({})
const infoFormRef = ref(null)

onMounted(() => {
 api.getSettings().then((res) => (infoForm.value = res.data))
})

async function updateSettings() {
  isLoading.value = true
  infoFormRef.value?.validate(async (err) => {
    if (err) return
    await api
      .updateSettings({ ...infoForm.value })
      .then(() => {
        isLoading.value = false
        $message.success("配置更新完成")
      })
      .catch(() => {
        isLoading.value = false
      })
  })
}
</script>

<template>
 <NLayout has-sider wh-full>
    <NLayoutContent style="background: transparent;margin-left: 20px;">
      <CommonPage show-footer title="基础设置">

         <n-card title="配置" size="small"  :segmented="{
            content: true,
            footer: 'soft',
          }">
      <template #header-extra>
         <n-alert title="正常情况下请勿修改" type="warning" :bordered="false"></n-alert>
      </template>
     <NForm
            ref="infoFormRef"
            label-placement="left"
            label-align="left"
            label-width="120"
            :model="infoForm"
            size="large"
          >
            <NFormItem class="form_item" label="登录白名单" path="login_white">
              <NInput v-model:value="infoForm.login_white" type="textarea" placeholder="请输入登录白名单"  :autosize="{minRows: 2}"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">一行一个手机号名单。添加白名单后，使用固定验证码即可登录成功</div>
                </NFlex>
              </template>
            </NFormItem>
            <NFormItem class="form_item" label="固定验证码" path="login_code">
              <NInput v-model:value="infoForm.login_code"  placeholder="8888" />
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">可以使用该验证码直接登录</div>
                </NFlex>
              </template>
            </NFormItem>

            <NFormItem class="form_item" label="APP反馈类型" path="feedback_types">
              <NInput v-model:value="infoForm.feedback_types" type="textarea" placeholder="请输入反馈类型"  :autosize="{minRows: 2}"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">App上的留言反馈类型设置</div>
                </NFlex>
              </template>
            </NFormItem>

            <NFormItem class="form_item" label="大型节日设置" path="festival_days">
              <NInput v-model:value="infoForm.festival_days" type="textarea" placeholder="请输入节日设置"  :autosize="{minRows: 2}"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">配置后，将会发送节日的待办和通知信息，例如 国庆节:10-1</div>
                </NFlex>
              </template>
            </NFormItem>

            <NFormItem class="form_item" label="通知最早时间" path="notice_start_time">
              <NInput v-model:value="infoForm.notice_start_time"  placeholder="08:00:00"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">将在该时间后发推送，例如08:00:00</div>
                </NFlex>
              </template>
            </NFormItem>

            <NFormItem class="form_item" label="通知最晚时间" path="notice_end_time">
              <NInput v-model:value="infoForm.notice_end_time"  placeholder="22:00:00"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">将在该时间前发推送，例如22:00:00</div>
                </NFlex>
              </template>
            </NFormItem>

<!--           <NFormItem class="form_item" label="科室" path="deps">-->
<!--              <NInput type="textarea" v-model:value="infoForm.deps"  placeholder="科室"  :autosize="{minRows: 2}"/>-->
<!--              <template #feedback>-->
<!--                <NFlex style="gap: 0">-->
<!--                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />-->
<!--                  <div style="color:#aaa">科室名称,一行一个</div>-->
<!--                </NFlex>-->
<!--              </template>-->
<!--            </NFormItem>-->
            <NFormItem class="form_item" label="咨询方式" path="method">
              <NInput type="textarea" v-model:value="infoForm.method"  placeholder="咨询方式"  :autosize="{minRows: 2}"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">咨询方式,一行一个</div>
                </NFlex>
              </template>
            </NFormItem>

            <NFormItem class="form_item" label="诊室" path="rooms">
              <NInput type="textarea" v-model:value="infoForm.rooms"  placeholder="诊室"  :autosize="{minRows: 2}"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">诊室名称,一行一个</div>
                </NFlex>
              </template>
            </NFormItem>

           <NFormItem class="form_item" label="分诊类型" path="fenzhen_type">
              <NInput type="textarea" v-model:value="infoForm.fenzhen_type"  placeholder="分诊类型"  :autosize="{minRows: 2}"/>
              <template #feedback>
                <NFlex style="gap: 0">
                  <component :is="renderIcon('mdi-alert-circle-outline', { size: 18,color:'#aaa' })" />
                  <div style="color:#aaa">分诊类型,一行一个</div>
                </NFlex>
              </template>
            </NFormItem>


          </NForm>

           <template #footer>
             <NButton type="primary" size="large" :loading="isLoading" @click="updateSettings">
              保存配置
            </NButton>
           </template>

  </n-card>



  </CommonPage>
          </NLayoutContent>
  </NLayout>
</template>
<style scoped>
  .form_item{
    margin-bottom: 20px;
  }
</style>